import { Drawer, message } from "antd";
import React from "react";
import StartNode from "./startNode";
import CollectNode from "./collectNode";
import EndNode from "./endNode";
import TableNode from "./tableNode";
import JudgeNode from "./judgeNode";
import ApiNode from "./apiNode";
import ReportSetting from "./reportSetting";
import ConfirmNode from "./confirmNode";
import { formFlowNode, formFlowNodeSave, formReportInfo, formReportUpdate } from "@/services/formInteraction";

class RightDrawer extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      node:{}
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initModal = (node,type) =>{
    this.setState({
      visible:true,
      node
    },() => {
      if(type && type === 'report'){
        this.getReportData()
      }else{
        this.getDetail()
      }
      
    })
  }

  doClose = () => {
    this.setState({
      visible:false,
      node:{}
    })
  }

  renderFormByNode = () => {
    const { node } = this.state;
    const { formId } = this.props;
    switch(node.model){
      case 'start':
        return(
          <StartNode onRef={ref => this.StartNode = ref} doSave={this.doSave} formId={formId}/>
        )
      case 'field':
        return(
          <CollectNode onRef={ref => this.CollectNode = ref} doSave={this.doSave} formId={formId} />
        )
      case 'api':
        return (
          <ApiNode onRef={ref => this.ApiNode = ref} doSave={this.doSave} formId={formId} />
        )
      case 'judge':
        return (
          <JudgeNode onRef={ref => this.JudgeNode = ref} doSave={this.doSave} formId={formId} />
        )
      case 'store':
        return (
          <TableNode onRef={ref => this.TableNode = ref} doSave={this.doSave} formId={formId} />
        )
      case 'end':
        return (
          <EndNode onRef={ref => this.EndNode = ref} doSave={this.doSave} formId={formId} />
        )
      case 'report':
        return(
          <ReportSetting onRef={ref => this.ReportSetting = ref} doSaveReport={this.doSaveReport} formId={formId} />
        )
      case 'confirm':
        return(
          <ConfirmNode onRef={ref => this.ConfirmNode = ref} doSave={this.doSave} formId={formId} />
        )
    }
  }

  getDetail = async () => {
    const { node } = this.state;
    const { formId } = this.props;
    const res = await formFlowNode({formId,stage:node.model,nodeId:node.id})
    console.log(res);
    switch(node.model){
      case 'start':
        this.StartNode.initForm(res)
        break;
      case 'field':
        this.CollectNode.initForm(res);
        break;
      case 'api':
        this.ApiNode.initForm(res);
        break;
      case 'judge':
        this.JudgeNode.initForm(res);
        break;
      case 'store':
        this.TableNode.initForm(res);
        break;
      case 'end':
        this.EndNode.initForm(res);
        break;
      case 'confirm':
        this.ConfirmNode.initForm(res);
        break;
    }
  }

  doSave = async data => {
    const { formId } = this.props;
    const { node } = this.state;
    const res = await formFlowNodeSave({
      formId,
      stage:node.model,
      nodeId:node.id,
      ...data
    })
    console.log(res);
    if(res.code == -1){
      //保存失败
    }else{
      message.info(res.message)
      this.doClose()
      node.cell.attr("text/textWrap/text",data.label)
      // this.props.refreshTemplate()
    }
    
  }

  getReportData = async () => {
    const { formId } = this.props;
    const res = await formReportInfo({formId})
    setTimeout(() => {
      this.ReportSetting.initForm(res)
    },300)
  }

  doSaveReport = async data => {
    const { formId } = this.props;
    const res = await formReportUpdate({formConfigurationInfoVoList:data,formId})
    if(res.code == -1){
      //保存失败
    }else{
      message.info(res.message)
      this.doClose()
    }
  }

  render(){
    const { visible,node } = this.state;
    return(
      <Drawer
        title={node.title ? node.title : '编辑节点'}
        visible={visible}
        onClose={this.doClose}
        width={800}
      >
      {
        this.renderFormByNode()
      }
      </Drawer>
    )
  }
}

export default RightDrawer